<template>
	<!-- 团购管理 -->
	<view class="shopmanagement_wp">
		<view class="s_nav">
			<view class="s_nav_item" :class="{'s_nav_active':active===1}" @click="navTap(1)">上架中({{number.upnum}})</view>
			<view class="s_nav_item" :class="{'s_nav_active':active===0}" @click="navTap(0)">已下架({{number.downnum}})</view>
			<view class="s_nav_item" :class="{'s_nav_active':active===2}" @click="navTap(2)">审核中</view>
			<view class="s_nav_item" :class="{'s_nav_active':active===3}" @click="navTap(3)">审核失败</view>
		</view>

		<view class="s_list">
			<view class="s_item" v-for="(item,index) in list" :key="item.id">
				<view class="s_i_head">
					<image :src="item.thumb" mode=""></image>
					<view class="s_i_title">
						<view class="s_i_name clamp">{{item.title}}</view>
						<view class="s_i_money">
							<text>{{item.saleprice}}</text><text>元</text>
							<text class="old">￥{{item.marketprice}}</text>
						</view>
						<view class="s_num">已支付{{item.saleInfo.paynum}}份</view>
						<view class="s_num">剩余{{item.saleInfo.total}}份</view>
						<view class="s_num">活动截止日期{{item.timeend}}</view>
					</view>
					<view class="s_total">
						<view class="s_num" style="margin-bottom: 8rpx;">剩余未使用{{item.saleInfo.totalcard||0}}份</view>
						<view class="s_num">未核销{{item.saleInfo.nochecknum}}份</view>
						<view class="s_num">已核销{{item.saleInfo.checknum}}份</view>
						<view class="s_num">已退款{{item.saleInfo.refundnum}}份</view>
					</view>
				</view>
				<view class="s_i_buttons">
					<view class="s_copy" @click="copyNew(item.id)">复制并创建</view>
					<view class="s_edit" @click="$navTo('../business/shoponcecardSet?id='+item.id+'&uid='+uid)">修改</view>
					<view class="s_xiajia" v-if="active===0" @click="goodsUp(item.id,index)">上架</view>
					<view class="s_xiajia" v-else-if="active===1" @click="down(item.id,index)">下架</view>
				</view>
			</view>
		</view>

		<view class="s_buttons" @click="$navTo('/pages/business/shoponcecardSet?uid='+uid)">添加 次卡</view>

		<view class="loading_empty">
			<image v-if="isloading" src="../../static/business/loading.gif" mode=""></image>
			<text v-if="isempty">到底了~</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid: '',
				active: 1,
				page: 0,
				list: [],
				isloading: false,
				isempty: false,
				number: []
			}
		},
		onReachBottom() {
			this.getlist();
		},
		onLoad(options) {
			this.uid = options.uid;
		},
		onShow() {
			this.page = 0;
			this.list = [];
			this.getlist();
			this.groupNumber();
		},
		methods: {
			// 上下架数量
			groupNumber(){
				this.$axios('groupgoods/mainscard','POST','supplier',{
					uid: this.uid
				}).then(res=>{
					if(res.data.code==200){
						this.number = res.data.data;
					}
				})
			},
			// 复制商品
			copyNew(id){
				this.$axios('groupgoods/copygoods','POST','supplier',{
					id,
					uid: this.uid
				}).then(res=>{
					if(res.data.code==200){
						this.$api.msg(res.data.data);
						this.page = 0;
						this.list = [];
						this.getlist();
						this.groupNumber();
					}
				})
			},
			goodsUp(id, i) {
				var that = this;
				uni.showModal({
					title: "提示",
					content: '上架次卡?',
					success(e) {
						if (e.confirm) {
							that.$axios('groupgoods/goodsUp', 'POST', 'supplier', {
								id,
								uid: that.uid
							}).then(res => {
								if (res.data.code == 200) {
									that.$api.msg("上架成功!");
									that.list.splice(i, 1);
								}
							})
						}
					}
				})
			},
			down(id, i) {
				var that = this;
				uni.showModal({
					title: "提示",
					content: '下架次卡?',
					success(e) {
						if (e.confirm) {
							that.$axios('groupgoods/goodsDown', 'POST', 'supplier', {
								id,
								uid: that.uid
							}).then(res => {
								if (res.data.code == 200) {
									that.$api.msg("下架成功");
									that.list.splice(i, 1);
								}
							})
						}
					}
				})
			},
			getlist() {
				this.page += 1;
				this.isloading = true;
				this.isempty = false;
				this.$axios('groupgoods/goodsCardList', 'POST', 'supplier', {
					status: this.active,
					page: this.page,
					uid: this.uid
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						var arr = res.data.data;
						// var arr = res.data.data.filter(item=>item.cardnum);
						this.list = this.list.concat(arr);
						this.isempty = arr.length <= 0 ? true : false;
					}
				})
			},
			navTap(e) {
				if (e == this.active) return;
				this.active = e;
				this.page = 0;
				this.list = [];
				this.getlist();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
		color: $font-color-dark;
		padding-bottom: 130upx;
	}

	.s_nav {
		position: fixed;
		background-color: #fff;
		display: flex;
		align-items: center;
		font-size: $font-base;
		width: 100%;
		z-index: 10;
	}

	.s_nav_item {
		flex: 1;
		line-height: 60upx;
		padding: 20upx 0;
		text-align: center;
		position: relative;
	}

	.s_nav_active:after {
		content: '';
		position: absolute;
		bottom: 20upx;
		left: 50%;
		transform: translateX(-50%);
		border-bottom: 3px $base-color solid;
		width: 40upx;
	}

	.s_list {
		overflow: hidden;
		padding-top: 100upx;
	}

	.s_item {
		background-color: #fff;
		border-radius: 10upx;
		margin: 20upx 20upx 0;
		padding: 20upx;
	}

	.s_i_head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		image {
			border-radius: 10upx;
			height: 130upx;
			width: 130upx;
		}
	}

	.s_i_title {
		padding-left: 10rpx;
		width: calc(100% - 300upx);
		.s_i_name {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.s_i_money {
			color: $base-color;
			.old{
				color: #999;
				text-decoration: line-through;
			}
			text:nth-of-type(2) {
				font-size: 20upx;
				margin-right: 10rpx;
			}
			text:nth-of-type(3) {
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
		.s_num{
			color: #777575;
			font-size: 24rpx;
		}
	}
	.s_total{
		color: #777575;
		font-size: 24rpx;
		text-align: right;
		white-space: nowrap;
	}

	.s_i_buttons {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 10upx;
		letter-spacing: 2px;
		view {
			border: 1px hsl(0, 0%, 87%) solid;
			border-radius: 20upx;
			line-height: 50upx;
			text-align: center;
			width: 150upx;
		}
		.s_copy{
			border: 1px $bg-color solid;
			width: auto;
			background: $bg-color;
			letter-spacing: 0;
			padding: 0 20rpx;
			color: #fff;
			margin-right: 30upx;
		}
		.s_edit {
			margin-right: 30upx;
		}
		.s_xiajia {
			background: linear-gradient(to right, #ff7101, #f03201);
			color: #fff;
		}
	}
	

	.s_edit {
		margin-right: 30upx;
	}

	.s_xiajia {
		background: linear-gradient(to right, #ff7101, #f03201);
		color: #fff;
	}

	.s_buttons {
		background-color: $base-color;
		border-radius: 20upx;
		color: #fff;
		line-height: 70upx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30upx;
		text-align: center;
		width: 94%;
		box-shadow: 4rpx 5rpx 17rpx 7rpx #ddd;
	}

	.loading_empty {
		color: #0062CC;
		text-align: center;
		padding: 20upx;
	}

	.loading_empty image {
		height: 60upx;
		width: 60upx;
	}
</style>